<script setup>
import { ref } from 'vue'
import { getTopMvApi } from '@/apis/mv'
import bus from '@/utils/bus'
import { ElMessage } from 'element-plus'
import MusicVideoCard from '@/components/MusicVideoCard/index.vue'

const props = defineProps({
  zone: {
    type: String
  }
})

// 更新时间
const updateTime = ref('')
// mv 的列表的数据
const mvList = ref([])

// 是否禁用触底加载
const isLoad = ref(false)
// 加载 mv 的列表的数据
const loadMVList = async () => {
  bus.emit('changeIsLoading', true)
  const { data } = await getTopMvApi({
    area: props.zone,
    offset: mvList.value.length
  })
  isLoad.value = !data.hasMore
  mvList.value.push(...data.data)
  updateTime.value = data.updateTime
  bus.emit('changeIsLoading', false)
  if (isLoad.value) ElMessage.success('加载完毕')
}

</script>

<template>
  <div class="music-video-list" v-infinite-scroll="loadMVList" :infinite-scroll-disabled="isLoad"
    :infinite-scroll-delay="400">
    <h1>更新时间： <span v-unix-format="updateTime"></span></h1>
    <div class="content-box">
      <template v-for="(item, index) in mvList" :key="item.id">
        <RouterLink :to="`/musicVideo/detail/${item.id}`" class="content">
          <MusicVideoCard :video="item" :index="index" />
        </RouterLink>
      </template>
    </div>
  </div>
</template>

<style scoped lang='scss'>
.music-video-list {
  padding: 0px 20px;

  h1 {
    margin-top: 20px;
    font-size: 16px;
  }

  .content-box {
    max-width: 1165px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

    &::after {
      content: '';
      width: 30%;
    }

    .content {
      margin-top: 20px;
      margin-bottom: 10px;
      width: 30%;
      cursor: pointer;
      position: relative;

    }
  }
}
</style>
